<template>
  <div class="title">
      人气排行榜
  </div>
  <ul>
      <li v-for="(item,index) in hotData" :key="index">
       
         <span class="number">{{index}}</span>
        <div class="message" @click="click(item.href)">
          <div class="name">{{item.name}}</div>
          <div class="desc">{{item.desc}}</div>
        </div> 
      </li>
  </ul>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
  setup(){
    const state = reactive({
      hotData:[]
    })
    const router = useRouter()
    onMounted(()=>{
      axios.get('/api/hotlist').then(res=>{
        console.log(res.data);
        state.hotData = res.data
      })
    })
    const click = (href)=>{
      router.push({name:'detail',params:{id:href}})
    }
    return{
      ...toRefs(state),
      click
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  font-size: 18px;
  margin-left: 20px;
  padding-top: 20px;
  color: #fff;
  font-weight: 700;
}
ul{
  margin: 40px 20px 0;
  padding-bottom: 40px;
  li{
    display: flex;
    color: #fff;
    margin-top: 10px;
    .number{
      margin-right: 10px;
      width:18px;
      height: 18px;
      line-height: 18px;
      background: #333;
      color: #999;
      font-size: 12px;
      text-align: center;
      border-radius: 3px;
    }
    .message{
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 14px;
      line-height: 18px;
      .name{
      }
      .desc{
        text-align: right;
        color: #FF3D00;
      }
    }
  }
}
</style>